site_8g/src/app/[locale]/(TabBar)/[[...share]]/_home/HomeTabs.tsx

"use client";
import { ConfigType } from "@/api/config";
import { GroupType } from "@/api/home";
import Box from "@/components/Box";
import { useRouter } from "@/i18n/routing";
import { Toast } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { FC, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import HomeGames from "./HomeGames";

const buttonGroup = [
    {
        icon: "qianbao3",
        category_name: "sixth",
        isHot: false,
        url: "/freeGames",
        locale: true,
        lock: false,
    },
    {
        icon: "qianbao3",
        category_name: "seventh",
        isHot: false,
        url: "/replayGames",
        locale: true,
        lock: false,
    },
    {
        icon: "liwulipinjiangpin",
        category_name: "first",
        isHot: true,
        url: "/promo",
        locale: true,
        lock: false,
    },
    // {
    //     icon: "pro-youxi1",
    //     category_name: "second",
    //     isHot: false,
    //     url: "/gameList/110",
    //     locale: true,
    //     lock: true,
    // },
    {
        icon: "huodongyule",
        category_name: "third",
        isHot: false,
        url: "/sports",
        locale: true,
        lock: false,
    },
    {
        icon: "shipin",
        category_name: "fourth",
        isHot: false,
        url: "/gameList/112",
        locale: true,
        lock: true,
    },
    {
        icon: "yingyong",
        category_name: "Fifth",
        isHot: false,
        url: "/gameList/110",
        locale: true,
        lock: true,
    },
] as const;

type TabItemType = (typeof buttonGroup)[number] & GroupType;
const TabItem = ({
    item,
    active,
    onClick,
}: {
    item: TabItemType;
    active?: boolean;
    onClick?: (item: TabItemType) => void;
}) => {
    const t = useTranslations("ButtonGroup");
    const router = useRouter();
    const handler = (item: TabItemType) => {
        if (!item.locale) {
            onClick && onClick(item);
            return;
        }

        if (item.lock) {
            Toast.show("It is under development.");
        } else {
            router.push(item.url);
        }
    };
    const cls = clsx("pro-iconfont  text-[0.14rem]", `pro-${item.icon}`);

    const cls2 = clsx("iconfont  text-[0.145rem]", `icon-${item.icon}`);

    const rootCls = clsx(
        "relative mr-[0.06rem] flex h-[0.3rem] bg-[#3a3a3a] flex-1 cursor-pointer items-center" +
            " rounded-[0.05rem]  px-[0.08rem] py-[0.03rem] text-[0.12rem] text-[#fff]",
        { "bg-primary-color": active }
    );
    return (
        <div className={rootCls} onClick={() => handler(item)}>
            <span className={item.icon === 'qianbao3' ? cls2 : cls}></span>
            <span className={"ml-[0.03rem] truncate"}>
                {item.locale ? t(item.category_name) : item.category_name}
            </span>
            {item.isHot && (
                <img
                    className={"absolute -top-[0.12rem] right-0 h-[0.21rem] w-[0.21rem]"}
                    src="data:image/png;base64,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"
                    alt=""
                />
            )}
        </div>
    );
};

interface Props {
    tabs: GroupType[];
    config: ConfigType;
}
const Tabs: FC<Props> = (props) => {
    const { tabs, config = { show_free_game: 2, show_again_game: 2 } } = props;

    const newButtonGroup = buttonGroup.filter((item: any) => {
        if (item.url === "/freeGames" && config.show_free_game !== 1) {
            return false;
        }
        if (item.url === "/replayGames" && config.show_again_game !== 1) {
            return false;
        }
        return true;
    });
    const tabData = [...tabs, ...newButtonGroup];

    const [active, setActive] = useState<number>(0);
    const router = useRouter();
    const selectHandler = (item: TabItemType, index: number) => {
        if (item.bet_type === 2 || item.bet_type === 3) {
            router.push(
                `/gameList/?gameListFlag=${item.category[0].jump_id}&type=1&bet_type=${item.bet_type}`
            );
            return;
        }
        setActive(index);
    };

    const groupGames = tabs[active]?.category;
    return (
        <>
            <Box pt={false}>
                <Swiper slidesPerView={"auto"} centeredSlidesBounds>
                    {tabData?.map((group, index) => (
                        <SwiperSlide key={index} className={"max-w-fit pt-[0.1389rem]"}>
                            <TabItem
                                item={group as TabItemType}
                                active={index === active}
                                onClick={(event) => selectHandler(event, index)}
                            ></TabItem>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </Box>

            <HomeGames groupGames={groupGames} />
        </>
    );
};

export default Tabs;